# Stepper

Компонент используется для отображения пошаговой навигации
в некотором процессе.

## API

### Stepper

| Свойство     | Тип                        | Описание                                                  |
| ------------ | -------------------------- | --------------------------------------------------------- |
| `classes`    | `Classes`                  | `Объект CSS-классов для стилизации`                       |
| `activeStep` | `number`                   | `Индекс текущего выбранного шага`                         |
| `direction`  | `DirecationType`           | `Вид степпера (горизонтальный или вертикальный)`          |
| `clickable`  | `boolean`                  | `Сделать степпер нелинейным, с возможность выбора шагов`  |
| `onChange`   | `(index: number) => void)` | `Обработчик изменения шага (в случае clickable === true)` |

### Step

| Свойство        | Тип               | Описание                                                                       |
| --------------- | ----------------- | ------------------------------------------------------------------------------ |
| `classes`       | `Classes`         | `Объект CSS-классов для стилизации`                                            |
| `index`         | `number`          | `Индекс шага`                                                                  |
| `indexToShow`   | `number`          | `Индекс шага для отображения (в случае несовпадения с основным индексом)`      |
| `description`   | `React.ReactNode` | `Описание шага`                                                                |
| `active`        | `boolean`         | `Отметить шаг выбранным`                                                       |
| `completed`     | `boolean`         | `Отметить шаг завершенным`                                                     |
| `disabled`      | `boolean`         | `Заблокировать шаг для выбора`                                                 |
| `error`         | `boolean`         | `Отметить шаг содержащим ошибку`                                               |
| `icon`          | `React.ReactNode` | `Иконка для отображения в обычном состоянии`                                   |
| `activeIcon`    | `React.ReactNode` | `Иконка для отображения в выбранном состоянии`                                 |
| `completedIcon` | `React.ReactNode` | `Иконка для отображения в завершенном состоянии`                               |
| `showIconBadge` | `boolean`         | `Отображать дополнительный бейдж иконки (в завершенном и ошибочном состоянии)` |

## Пример использования

```javascript
import { Stepper, Step } from '@v-uik/stepper'
// ...
;<Stepper activeStep={activeStep}>
  <Step index={0}>First step</Step>
  <Step index={1}>Second step</Step>
  <Step index={2}>First</Step>
</Stepper>
```
